<template>

  <v-miaoScroll>
    <div style="display: flex;flex-direction: column;width:3.75rem;height:3rem;background-color: #FFCF0F">
      <img src="/static/background.png" style="width:3.75rem;height:3rem"/>
    </div>
  </v-miaoScroll>

</template>

<script>

  export default {
    data() {
      return {
        touchStart:0,
        downFreshDistance:-100,
        cat_rotate:-128,
        transitiontime:0,
        jishu:0,
        left:85,
        right:85,
        bottom:0,
        lbratio:2,
        rbratio:4,
        jishu:0,
        des:"下拉刷新",
        shenbottom:0,
        leftlist:[],
        leftlistpx:185,
        rightlist:[],
        rightlistpx:185,
      }
    },
    methods:{
      panStart(e) {
        e.preventDefault();
        this.touchStart = e.center.y;

      },
      panMove(e) {
        e.preventDefault();
        if (this.downFreshDistance < -80) {
          this.downFreshDistance = e.center.y - this.touchStart - 100;
        } else if (this.downFreshDistance >= -80 && this.downFreshDistance < 0) {
          this.downFreshDistance = e.center.y - this.touchStart - 100;
          this.cat_rotate = -128 - (232 / 80) * (e.center.y - this.touchStart - 20)
          console.log(this.cat_rotate)
        } else if (this.downFreshDistance >= 0){
          console.log(this.downFreshDistance)
        }
      },
      panEnd(e) {
        e.preventDefault();
        this.transitiontime = 0.5;
        this.cat_rotate = -128;
        this.jishu  = this.jishu + 1
        this.changeState();

      },
      changeState(){
        debugger
        var that = this
//        that.transitiontime = 0;
        setTimeout(function(){
          if (that.jishu % 2 == 0) {
            that.cat_rotate = -128;
          } else if (that.jishu % 2 == 1) {
            that.cat_rotate = -360;
          }
          that.jishu  = that.jishu + 1
          that.changeState()
        },that.transitiontime * 1000);

      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  @keyframes back-half{
    0%{
      transform: rotate( 0 );
    }
    99%{
      transform: rotate( 180deg );
      opacity: 1;
    }
    100%{
      transform: rotate( 180deg );
      opacity: 0;
    }
  }
</style>
